
#canvas {
opacity: 0.5;
font-size: 24px;
width:  800px;
height: 500px;
position: absolute; top: 0px; left: 0px;

background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, 
                                   from(#f00), 
                                   color-stop(0.6, green), 
                                   color-stop(0.8, blue),
                                   to(#00f));

background-image: -gradient(linear, 0% 0%, 0% 100%, 
                                   from(#f00), 
                                   color-stop(0.6, green), 
                                   color-stop(0.8, blue),
                                   to(#00f));
-webkit-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow:  10px 10px 10px #00f;
}

#canvas:hover {
font-size: 24px;
width:  700px;
height: 500px;
position: absolute; top: 0px; left: 0px;

background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, 
                                   from(#f00), 
                                   color-stop(0.2, orange), 
                                   color-stop(0.4, yellow), 
                                   color-stop(0.6, green), 
                                   color-stop(0.8, blue),
                                   to(#00f));

background-image: -gradient(linear, 0% 0%, 0% 100%, 
                            from(#f00), 
                            color-stop(0.2, orange), 
                            color-stop(0.4, yellow), 
                            color-stop(0.6, green), 
                            color-stop(0.8, blue),
                            to(#fff));

-webkit-border-radius: 4px;
border-radius: 4px;

-webkit-box-shadow:  10px 10px 10px #00f;
}

